import React, { Component } from 'react';
import { connect } from 'react-redux'  
import { Modal, Form, Input, Button } from 'antd';
const FormItem = Form.Item;

class AlarmModal extends Component {
  constructor(props) {
    super(props);
  }

  okHandler = () => {
     const { onOk } = this.props;
     this.props.form.validateFields((err, values) => {
      if (!err) {
        debugger;
        onOk(values);
      }
     });
  };

  render() {

    const { alarm, dispatch, item } = this.props;
    const { getFieldDecorator } = this.props.form;
    
      return (
        <span>
            <Modal
                maskClosable= {this.props.maskClosable}
                confirmLoading= {this.props.confirmLoading}
                title={this.props.title}
                visible={this.props.visible}
                onOk={this.okHandler}
                onCancel={this.props.onCancel}
                key={this.props.newKey}
                footer={[
                  <Button key="back" size="large" onClick={this.props.onCancel}>关闭</Button>,
                  this.props.type === 'handle' ?
                  <Button key="submit" type="primary" size="large" onClick={this.okHandler}>
                    保存
                  </Button> :
                  ''
                ]}
            > 
              {this.props.type === 'handle' ? 
              <Form layout='horizontal' onSubmit={this.okHandler}>  
                  <FormItem style={{marginBottom:'0px'}}>
                    {getFieldDecorator('id',{initialValue:item.id_})(
                      <Input type="hidden"/>
                    )}  
                  </FormItem>
                  <FormItem>
                    {
                      getFieldDecorator('result', {
                        initialValue: item.result,
                        rules: [
                          { required: true, whitespace: true ,message: '请输入处理结果'},
                          { max: 200, message: '处理结果 200 字符以内' },
                        ]
                      })(<Input type="textarea" rows={4} placeholder="请输入处理结果" />)
                    }
                  </FormItem>
              </Form>
              :
              <div style={{wordWrap:'break-word'}}>{item}</div>}
            </Modal>
        </span>
      );
  }
}

export default Form.create()(AlarmModal)